<template>
    <div>
        <el-form :model="data.commentReportDetail" ref="examineRef" style="margin: 0 auto;width: 1000px">
            <el-form-item label="举报人" label-width="130px">
                <span>{{ data.commentReportDetail.reportUserNickName }}</span>
            </el-form-item>
            <el-form-item label="被举报人" label-width="130px">
                <span>{{ data.commentReportDetail.reportedUserNickName }}</span>
            </el-form-item>
            <el-form-item label="举报类型" label-width="130px">
                <span>{{ data.commentReportDetail.commentReportTypeName }}</span>
            </el-form-item>
            <el-form-item label="举报原因" label-width="130px">
                <el-input v-model="data.commentReportDetail.reportReason" autocomplete="off" type="textarea"
                          :autosize="{ minRows: 10, maxRows: 10 }"/>
            </el-form-item>
            <el-form-item label="举报时间" label-width="130px">
                <span>{{ data.commentReportDetail.reportTime }}</span>
            </el-form-item>
            <el-form-item label="是否违规" label-width="130px">
                <span v-if="data.commentReportDetail.status === 2">存在违规</span>
                <span v-if="data.commentReportDetail.status === 3">不存在违规</span>
            </el-form-item>
            <el-form-item label="相关图片" label-width="130px">
                <div class="demo-image" v-for="image in data.commentReportDetail.reportImages" :key="image">
                    <el-image style="width: 100px; height: 100px" :src="image" fit="fit"
                              :preview-src-list="data.commentReportDetail.reportImages"/>
                </div>
            </el-form-item>

            <el-form-item label="审核结果" label-width="130px" prop="examineResult">
                <el-input v-model="data.commentReportDetail.examineResult" autocomplete="off" type="textarea"
                          :autosize="{ minRows: 10, maxRows: 10 }"/>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {detail} from "@/api/commentReport/commentReport";
import {reactive, onMounted, ref} from "vue";
import {useRoute} from "vue-router";

export default {
    setup() {
        const data = reactive({
            commentReportDetail: '',
        })
        const route = useRoute();
        const examineStatus = [
            {
                "value": 2,
                "label": "存在违规"
            },
            {
                "value": 3,
                "label": "不存在违规"
            }
        ]
        const examineRef = ref(null)
        /**
         * 获取评论举报详情
         */
        const commentReportDetail = () => {
            detail(route.query.uuid).then(res => {
                data.commentReportDetail = res.data
            })
        }
        onMounted(() => {
            commentReportDetail()
        })
        return {
            data,
            examineStatus,
            examineRef,
        }
    }
}
</script>